<template>
  <!-- 雷达图  图表必须给高和宽度-->
  <div ref="myDiv" class="radar-echart"/>
</template>

<script>
// 完成加载过程
var echarts = require('echarts/lib/echarts') // 引入echarts主模块
require('echarts/lib/chart/pie') // 引入雷达图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
import { LegendComponent } from 'echarts/components'
echarts.use([LegendComponent])

export default {
  // 页面渲染完毕事件
  mounted() {
    const myChart = echarts.init(this.$refs.myDiv) // 得到图表实例
    myChart.setOption({
      tooltip: {},
      series: [
        {
          name: '面积模式',
          type: 'pie',
          radius: [10, 50],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 1
          },
          data: [
            { value: 59, name: 'UI' },
            { value: 320, name: '前端' },
            { value: 240, name: 'java' },
            { value: 149, name: 'python' },
            { value: 100, name: 'c++' }
          ]
        }
      ]
    })
  }
}
</script>

<style scoped>
.radar-echart {
  width: 220px;
  height: 150px;
  margin: auto;
}
</style>
